<!DOCTYPE html>
<html>
<head>
    <title>动作课程新增</title>
    {% include 'admin/common/header.html' %}
    <style>
        .layui-form-item {
            margin-top: 17px !important;
            margin-bottom: 17px !important;
        }

        .layui-table-cell {
            height: 45px;
            line-height: 45px;
        }
    </style>
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
    {# 左侧栏 #}
    <div class="layui-col-md3">
        <div class="layui-card">
            <div class="layui-card-header">
                课程信息
            </div>
            <div class="layui-card-body" style="padding: 25px;">
                <div class="layui-form" action="">
                    <div class="layui-form-item">
                        <label class="layui-form-label">课程图标</label>
                        <div class="layui-input-block">
                            <div class="user-info-head" id="userInfoHead">
                                <img id="course_icon" src="{{ courseStandard.icon_path }}" width="115px"
                                     height="115px" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">课程名称</label>
                        <div class="layui-input-block">
                            <input type="text" id="course_name" lay-verify="required" placeholder="请输入课程名称"
                                   value="{{ courseStandard.course_name }}" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">课程描述</label>
                        <div class="layui-input-block">
                            <textarea id="course_description" placeholder="请输入课程详细信息" class="layui-textarea"
                                      rows=16>{{ courseStandard.course_description }}</textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    {# 右侧栏 #}
    <div class="layui-col-md9">
        {# 课程视频信息卡片 #}
        <div class="layui-card">
            <div class="layui-card-header">视频关键点选择</div>
            <div class="layui-card-body">
                <div class="layui-form layui-row layui-col-space12">
                    <div class="layui-form-item" style="margin-bottom: 0;text-align: right;margin-right: 20px;">
                        <div class="pear-btn pear-btn-primary" id="btn_add_point">新增课程视频
                        </div>
                        <table id="user-table" lay-filter="user-table"></table>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-body" style="text-align: right">
                <div class="layui-btn layui-btn-primary layui-border-green" id="submit_course"><i
                        class="layui-icon layui-icon-ok"></i>提交
                </div>
                <div class="layui-btn layui-btn-primary layui-border-red" id="cancel_course"><i
                        class="layui-icon layui-icon-close"></i>取消
                </div>
            </div>
        </div>
    </div>

</div>
</div>
{% include 'admin/common/footer.html' %}


<script type="text/html" id="user-bar">
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i
            class="pear-icon pear-icon-edit"></i>
    </button>
    <button class="pear-btn pear-btn-danger pear-btn-sm btn-delete" lay-event="remove"><i
            class="pear-icon pear-icon-ashbin"></i>
    </button>
</script>

<script>
    layui.use(['table', 'dropdown', 'form', 'jquery', 'popup', 'common'], function () {
        let $ = layui.jquery
        let layer = layui.layer
        let form = layui.form
        let popup = layui.popup
        let table = layui.table
        let MODULE_PATH = '/course/standard/'
        let course_id = {{ courseStandard.course_id }}
            let
        deleteList = []
        data = []
        {% for action in actions %}
            data.push({
                course_id: parseInt({{ action.course_id }}),
                action_id: {{action.action_id}},
                action_name: "{{ action.action_name }}",
                action_description: "{{ action.action_description }}",
                action_path: "{{ action.action_path }}",
                action_length: {{ action.action_length }},
                action_loadtime: "{{ action.action_loadtime }}".replace("T", " "),
                action_updatetime: "{{ action.action_updatetime }}".replace("T", " "),
                icon_path: "{{ action.icon_path }}",
                skeleton_path: "{{ action.skeleton_path }}",
                has_change: false,
                keyframes: {{ action.keyframes|tojson }}
            })
        {% endfor %}
        // 修改课程图标
        $('#course_icon').click(function () {
            layer.open({
                type: 2,
                title: '更换图片',
                shade: 0.1,
                area: ['900px', '500px'],
                content: MODULE_PATH + 'cover/course',
                btn: ['确定', '取消'],
                yes: function (index, layero) {
                    window['layui-layer-iframe' + index].submitForm()
                }
            })
        })


        {#
            点击新增视频后的处理方法
        #}
        $('#btn_add_point').click(function () {
            layer.open({
                type: 2,
                title: '新增',
                shade: 0.1,
                area: ['100%', '100%'],
                content: MODULE_PATH + 'add/action',
                end: function () {
                    table.reload('user-table', {
                        data: data
                    });
                }
            })
        })

        // 表格数据
        let cols = [
            [
                {
                    title: '动作名称',
                    field: 'action_name',
                    align: 'center',
                },
                {
                    title: '动作描述',
                    field: 'action_description',
                    align: 'center'
                },
                {
                    title: '动作时长',
                    field: 'action_length',
                    align: 'center'
                },
                {
                    title: '创建时间',
                    field: 'action_loadtime',
                    align: 'center'
                },
                {
                    title: '操作',
                    toolbar: '#user-bar',
                    align: 'center',
                    width: 130
                }
            ]
        ]

        // 获取动作的选项
        let dataAction = [];
        $('#action-select option').each(function () {
            var titleAction = $(this).text();
            var idAction = $(this).val();
            dataAction.push({
                title: titleAction,
                id: idAction
            });
        });

        // 渲染表格数据
        table.render({
            elem: '#user-table',
            cols: cols,
            skin: 'line',
            page: true,
            limits: 10,
            data: data,
            // 表格加载完成后操作
            done: function (res, curr, count) {
                var options = this;

                // 根据点击的按钮获取按钮所在行的数据
                table.getRowData = function (elem) {
                    var index = $(elem).closest('tr').data('index');
                    return table.cache[options.id][index] || {};
                };

                $('.btn-delete').click(function () {
                    var rowData = table.getRowData(this)
                    layer.confirm('确定要删除该关键点', {icon: 3, title: '提示'}, function (index) {
                        layer.close(index)
                        // 删除时，除了删除表格中的数据，也要删除data中的数据， 如果是已经存在数据库中的关键帧，则需要把此关键帧记录在删除列表中
                        if ('action_id' in rowData) {
                            deleteList.push(rowData.action_id)
                        }
                        data.splice(data.indexOf(rowData), 1)
                        popup.success("删除成功", function () {
                            table.reload('user-table', {data: data})
                        })
                    })
                })
            }
        })

        // 提交数据
        $('#submit_course').click(function () {
            var course_icon = $('#course_icon').attr('src')
            var course_name = $('#course_name').val()
            if (course_name == '') {
                popup.failure('请输入课程名称')
                return
            }
            var course_description = $('#course_description').val()

            // 弹出等待窗口
            var index = layer.load(0, {
                shade: [0.1, '#fff'] //0.1透明度的白色背景
            });
            layer.msg("正在修改中，请稍后……")
            $.ajax({
                method: 'POST',
                url: MODULE_PATH + 'edit/course',
                contentType: 'application/json',
                data: JSON.stringify({
                    course_id: course_id,
                    course_icon: course_icon,
                    course_name: course_name,
                    course_description: course_description,
                    delete_list: deleteList,
                    action_infos: data
                }),
                success: function (result) {
                    layer.close(index)
                    if (result.success) {
                        popup.success("修改课程成功")
                    } else {
                        popup.failure(result.msg)
                    }
                    parent.layui.table.reload('user-table')
                    setTimeout(function () {
                        parent.layer.close(parent.layer.getFrameIndex(window.name))
                    }, 1000)

                }
            })


        })
        $('#cancel_course').click(function () {
            parent.layer.close(parent.layer.getFrameIndex(window.name))
        })
        //
        $('.user-group').click(function () {
            let group = $(this).attr('user-group')
            let field = form.val('user-query-form')
            if (group === '-1') {
                field.deptId = group
                $(this).removeClass('button-default')
                $(this).prev().removeClass('button-primary')
                $(this).prev().addClass('button-default')
                $(this).addClass('button-primary')
            } else {
                field.deptId = group
                $(this).removeClass('button-default')
                $(this).next().removeClass('button-primary')
                $(this).next().addClass('button-default')
                $(this).addClass('button-primary')
            }
            window.refresh(field)
        })

        table.on('tool(user-table)', function (obj) {
            if (obj.event === 'edit') {
                window.edit(obj)
            }
        })

        table.on('toolbar(user-table)', function (obj) {
            if (obj.event === 'add') {
                window.add()
            } else if (obj.event === 'refresh') {
                window.refresh()
            } else if (obj.event === 'batchRemove') {
                window.batchRemove(obj)
            } else if (obj.event === 'collasped') {
                $('.user-left').toggleClass('user-collasped')
                $('.user-main').toggleClass('user-collasped')
                table.resize()
            }
        })
        window.edit = function (obj) {
            // 打开动作修改弹窗
            layer.open({
                type: 2,
                title: '修改',
                shade: 0.1,
                area: ['100%', '100%'],
                content: MODULE_PATH + 'edit/action',
                success: function (layero, index) {
                    // 获取 iframe 的 DOM 对象
                    let iframe = layero.find('iframe')[0];
                    // 获取 iframe 的 window 对象
                    let iframeWindow = iframe.contentWindow;
                    // 获取 iframe 的 document 对象
                    let iframeDocument = iframe.contentDocument;
                    // 之后，你就可以操作 iframe 中的内容了
                    // 设置弹窗的动作图标
                    $(iframeDocument).find('#course_icon').prop('src', obj.data.icon_path)

                    // 设置动作名称
                    $(iframeDocument).find('#course_name').prop('value', obj.data.action_name)

                    // 设置动作描述
                    $(iframeDocument).find('#course_description').prop('value', obj.data.action_description)

                    // 设置动作视频路径
                    $(iframeDocument).find('#video').prop('src', obj.data.action_path)

                    // 设置动作关键帧
                    iframeWindow.data = obj.data.keyframes

                    // 在动作页面保存原来的动作视频路径
                    iframeWindow.videoOrigin = obj.data.action_path

                    // 在动作页面保存原来的动作封面路径
                    iframeWindow.action_icon = obj.data.icon_path

                    // 动作骨架保存路径
                    iframeWindow.skeletonPath = obj.data.skeleton_path

                    // 如果有已删除关键帧列表，也保存到动作页面中
                    if ('delete_list' in obj.data) {
                        iframeWindow.deleteList = obj.data.delete_list
                    }

                    //  保存动作id到动作页面中
                    iframeWindow.action_id = obj.data.action_id

                    // 设置了关键帧之后，需要刷新显示关键帧的列表
                    iframeWindow.layui.table.reload('user-table', {data: iframeWindow.data})
                }
            })
        }
    })
</script>
</body>
</html>
